import { defineComponentNamed, defineDirectiveNamed } from "@/shared/define.js";

export default defineDirectiveNamed(
  /* <error-boundary> */ "error-boundary",
  () => ({
    require: {
      $suspense: "^^ngSuspense",
    },
    controller: class {
      /** @type {Error | null} */
      error = null;

      /** @type {boolean} */
      hasError = false;

      /** @type {boolean} */
      isLoading = false;

      /**
       * @param {ng.IScope} $scope
       */
      constructor($scope) {
        this.$scope = $scope;
      }

      /**
       * @type {string[]}
       */
      static $inject = ["$scope"];

      handleClick() {
        console.log("error-boundary", this);
      }
    },
    controllerAs: "$errorBoundary",
    transclude: true,
    template: html`
      <div class="error-boundary">
        <div class="error-boundary__content">
          <div class="tab-content" ng-transclude></div>
        </div>
      </div>
      ${DebugButtonHTML("$errorBoundary")}
    `,
  }),
);
